<!--
  Generated template for the VipTradePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="gm-primary">
    <ion-title>今日VIP{{trade_radio[trade_type].title}}动态</ion-title>

    <ion-buttons right>
      <button ion-button clear (click)="onShowMore()">
        筛选
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="onRefresh($event)">
    <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="下拉开始刷新"
        refreshingSpinner="circles"
        refreshingText="数据正在载入">
    </ion-refresher-content>
  </ion-refresher>

  <ion-list no-lines *ngIf="info_list.length > 0">
    <div *ngFor="let info of info_list" class="message-wrapper">
      <img [src]="avatar_array[info.user_gender]" class="profile-pic" [ngClass]="getPositionStyle(info)"/>

      <div class="chat-bubble" [ngClass]="getPositionStyle(info)">
        <div class="message bold" [ngClass]="getTradeInfoStyle(info.type)">{{info.content}}</div>

        <div class="message-detail">
          <span>会员: {{info.user_code}}</span>
          <span [ngClass]="getDateStyle(info)">&emsp;{{info.updated_at|date:'HH点mm分ss秒'}}</span>
        </div>
      </div>

      <div class="cf"></div>
    </div>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="onInfinite($event)" *ngIf="info_list.length < info_count">
    <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="数据正在载入">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <div *ngIf="info_list.length == 0" class="no-data">
    <img src="assets/icon/empty.png">
    <div>今日还没有{{trade_radio[trade_type].subTitle}}动态</div>
  </div>


  <ion-fab right bottom>
    <button ion-fab color="gm-primary"><ion-icon name="md-share"></ion-icon></button>
    <ion-fab-list side="top">
      <button ion-fab color="primary" (click)="onScrollTop()"><ion-icon name="arrow-round-up"></ion-icon></button>
    </ion-fab-list>
    <ion-fab-list side="left">
      <button ion-fab color="gray-normal" (click)="onPubTradeInfo(3)"><b>平仓</b></button>
      <button ion-fab color="green" (click)="onPubTradeInfo(2)"><b>卖出</b></button>
      <button ion-fab color="red" (click)="onPubTradeInfo(1)"><b>买入</b></button>
    </ion-fab-list>
  </ion-fab>
</ion-content>
